import React, { Component } from 'react'
import './css/04-组件的样式.css'
export default class App extends Component {
    // myref = React.createRef()
    state = {
        mytext:"",
        list: [
            {
                id: 1,
                mytext: "今天又要学react",
                checked:false
            },
            {
                id: 2,
                mytext: "周六放假",
                checked:false
            },
            {
                id: 3,
                mytext: "周日放假",
                checked:true
            },
        ],
        ischeck:false
    }
    // 添加数据
    add = () => {
        this.setState({
            list: [...this.state.list,
            {
                // id: this.state.list.length + 1,
                id:Math.random()*100000,
                mytext: this.state.mytext,
                checked:false
            }],
            // 清空输入框数据
            mytext:""
        })
    }
    // 删除
    delItem=(id)=>{
        // 第一种删除方法
        // this.setState({
        //     list:this.state.list.filter((item,index)=>index!==id)
        // })
        // 第二种删除方法
        let newlist=this.state.list.concat()
        newlist.splice(id,1)
         this.setState({
            list:newlist
        })
    }
    // 勾选复选框
    handleChange(index){
        console.log(index);
        let newlist=[...this.state.list]
        newlist[index].checked=!newlist[index].checked
        this.setState({
            list:newlist
        })
    }
    
    render() {
        return (
            <div>
                <h3>TODO案例</h3>
                <input type="text" value={this.state.mytext} onChange={(e)=>{
                    this.setState({mytext:e.target.value})
                }}/>
                <button onClick={() => this.add()}>add</button>
                <ul>
                    {
                        this.state.list.map((item,index) => (
                           
                        <li key={item.id} className={item.checked===true?'linethrough':''}> 
                        <input type="checkbox" checked={item.checked} onChange={()=>this.handleChange(index)}/>
                            {item.mytext} 
                        <button onClick={()=>this.delItem(index)}> 删除</button>
                        </li>))
                    }
                    {/* 条件渲染---》数据为空时渲染--1、三目运算符，2、&&运算符 3、使用className类名样式来操作显示隐藏*/}
                    {/* {this.state.list.length===0?<li>暂无代办事项</li>:null} */}
                    {/* {this.state.list.length===0 && <li>暂无代办事项</li>} */}
                    <li className={this.state.list.length===0?'':'hidden'}>暂无代办事项</li>
                </ul>
                
            </div>
        )
    }
}
